<template>
  <!-- 导航栏 -->
  <van-nav-bar title="订单列表页" left-text="返回" left-arrow @click-left="onClickLeft" />
  <!-- <table class="goodsList" border="1">
    <thead>
      <tr>
        <th width="29%">商品图片</th>
        <th width="31%">订单详情</th>
        <th width="13%">商品数量</th>
        <th>支付金额</th>
        <th>商品编号</th>
        <th>收货人</th>
      </tr>
    </thead>
    <tbody v-for="item in goodsList" :key="item.id">
      <tr v-for="(goods, index) in item.orderDetailList" :key="goods.id">
        <td><img src="" alt="" /></td>
        <td>{{ goods.skuName }}</td>
        <td>{{ goods.skuNum }}</td>
        <td>{{ goods.orderPrice }}</td>
        <td>888</td>
        <td :rowspan="goods.length">111</td>
      </tr>
    </tbody>
  </table> -->

  <!-- <table v-for="item in goodsList" :key="item.id">
    <tbody>
      <tr v-for="(goods, index) in item" :key="goods.id">
        <td v-for="i in item.orderDetailList" class="imglist"><img :src="i.imgUrl" alt="" /></td>
      </tr>
    </tbody>
  </table> -->

  <div class="chosetype">
    <table>
      <thead>
        <tr>
          <th width="29%">商品</th>
          <th width="31%">订单详情</th>
          <th width="13%">收货人</th>
          <th>金额</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="orders" v-if="goodsList">
    <table class="order-item" v-for="order in goodsList.records" :key="order.id">
      <thead>
        <tr>
          <th colspan="5">
            <span class="ordertitle">
              {{ order.createTime }} 订单编号：{{ order.outTradeNo }}
              <span class="pull-right delete">
                <img src="" />
              </span>
            </span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(goods, index) in order.orderDetailList" :key="goods.id">
          <td width="60%">
            <div class="typographic">
              <img :src="goods.imgUrl" />
              <a href="javascript:;" class="block-text">
                {{ goods.skuName }}
              </a>
              <span>x{{ goods.skuNum }}</span>
              <a href="javascript:;" class="service">售后申请</a>
            </div>
          </td>
          <td v-if="index === 0" :rowspan="order.orderDetailList.length" width="8%" class="center">
            {{ order.consignee }}
          </td>
          <td v-if="index === 0" :rowspan="order.orderDetailList.length" width="13%" class="center">
            <ul class="unstyled">
              <li>总金额¥138.00</li>
              <li>在线支付</li>
            </ul>
          </td>
          <td v-if="index === 0" :rowspan="order.orderDetailList.length" width="8%" class="center">
            <a href="javascript:;" class="btn">已完成 </a>
          </td>
          <td v-if="index === 0" :rowspan="order.orderDetailList.length" width="13%" class="center">
            <ul class="unstyled">
              <li>
                <a href="mycomment.html" target="_blank">评价|晒单</a>
              </li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { reqOrderList } from '@/api/pay'
const pages = ref({
  page: 1,
  limit: 5
})

// 导航栏模块
const onClickLeft = () => history.back()

// 商品列表数据
const goodsList = ref()

// 调用商品数据接口
const getOrderList = async () => {
  const res = await reqOrderList(pages.value.page, pages.value.limit)
  if (res.code === 200) {
    // 获取商品列表数据
    goodsList.value = res.data
  }
}

onMounted(async () => {
  getOrderList()
})
</script>

<script lang="ts">
export default {
  name: 'OrderLists'
}
</script>

<style lang="scss" scoped>
.goodsList {
  border: 1px solid black;
  font-size: 0.4rem;
  border-collapse: collapse;
}

.imglist img {
  width: 200px;
  height: 200px;
}

// 表格
.chosetype {
  margin-bottom: 15px;
  color: #666;

  table {
    border: 1px solid #e6e6e6;
    border-collapse: separate;
    border-radius: 2px;
    width: 100%;
    max-width: 100%;
    border-spacing: 0;

    th {
      padding: 6px 8px;
      color: #666;
      font-weight: 700;
      vertical-align: bottom;
      background-color: #f4f4f4;
      line-height: 18px;
      border-bottom: 1px solid #e6e6e6;
      font-size: 12px;
      text-align: left;
    }
  }
}

// 表单内容
.orders {
  font-size: 12px;

  a {
    &:hover {
      color: #4cb9fc;
    }
  }

  table {
    border: 1px solid #e6e6e6;
    border-collapse: collapse;
    border-radius: 2px;
    width: 100%;
    margin-bottom: 18px;
    max-width: 100%;

    th {
      padding: 6px 8px;
      line-height: 18px;
      text-align: left;
      vertical-align: bottom;
      background-color: #f4f4f4;
      font-size: 12px;
      color: #666;

      .pull-right {
        float: right;
        cursor: pointer;

        img {
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }

    td {
      font-size: 12px;
      color: #666;
      padding: 6px 8px;
      line-height: 18px;
      text-align: left;
      vertical-align: middle;
      border: 1px solid #e6e6e6;

      &.center {
        text-align: center;
      }

      .typographic {
        img {
          width: 100px;
          height: 100px;
          float: left;
          margin-right: 10px;
        }

        a {
          float: left;
          min-width: 80px;
          max-width: 250px;
          color: #e1251b;

          &.service {
            color: #666;
          }
        }

        span {
          float: left;
          min-width: 80px;
          max-width: 250px;
          text-align: center;
        }
      }
    }
  }
}

// 表格结束
</style>
